<template>
	<a-card :bordered="false">
		<!-- <CalendarTable></CalendarTable> -->
		<!-- <FullCalendar  ref="fullCalendarRef" :options="calendarOptions">
			<template v-slot:eventContent="arg">
				<div class="fc-event-main-wrapper" :style="{ color: arg.backgroundColor }" >
					<div class="fc-event-main-frame">
						<div class="fc-event-time">{{ arg.timeText }}</div>
						<div class="fc-event-title-container">
							<div class="fc-event-title fc-sticky" >
								{{ arg.event.title }}
							</div>
						</div>
					</div>
				</div>
			</template>
		</FullCalendar> -->
	</a-card>
	<!-- <FormDetail ref="formRef" @successful="tableRef.refresh(true)" /> -->
</template>

<script setup>
	import { ref, defineProps } from 'vue'
	import FormDetail from './formDetail.vue'
	import FullCalendar from '@fullcalendar/vue3'
	import dayGridPlugin from '@fullcalendar/daygrid'
	import timeGridPlugin from '@fullcalendar/timegrid'
	import interactionPlugin from '@fullcalendar/interaction'
	import listPlugin from '@fullcalendar/list' // 提供 listWeek view
	import bizSchoolCalendarApi from '@/api/biz/bizSchoolCalendarApi'
	import moment from 'moment'
	import Lunar from 'lunar-javascript'
	import calendar from './lunarDay'
	import CalendarTable from '@/views/biz/schoolcalendar/components/calendar.vue'
	const formRef = ref()
	const eventList = ref()
	const emit = defineEmits({ goBack: null })
	const props = defineProps({
		dateMin: {
			required: true // 指定这个 prop 是必需的
		}
	})
	const DateMin = props.dateMin
	const DateMax = ref()
	const comAction = {
		// 是否节假日
		isFestival(slotData) {
			const formattedDate = moment(slotData).format('YYYY-MM-DD')
			let solarDayArr = formattedDate.split('-')
			let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

			// 公历节日\农历节日\农历节气
			let festAndTerm = []
			festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
			festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
			festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
			festAndTerm = festAndTerm.join('')

			return festAndTerm
		}
	}

	const calendarOptions = ref({
		plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
		initialView: 'dayGridMonth',
		initialDate: DateMin,
		locale: 'zh-cn',
		buttonText: {
			today: '今天',
			dayGridMonth: '月',
			timeGridWeek: '周',
			timeGridDay: '日'
		},
		customButtons: {
			myCustomButton: {
				text: '返回',
				click: function () {
					emit('goBack')
				}
			}
		},
		validRange: {
			start: DateMin, // 起始日期
			end: DateMax // 结束日期
		},
		headerToolbar: {
			start: 'dayGridMonth,timeGridWeek,timeGridDay',
			center: 'title',
			end: 'myCustomButton today prevYear,prev,next,nextYear'
		},
		firstDay: 1,
		droppable: true,
		editable: true,
		selectable: true,
		selectMirror: true,
		dayMaxEvents: true,
		weekends: true,
		events: [
			{ title: 'event 1', date: '2024-10-01' },
			{ title: 'event 2', date: '2024-10-02' }
		],
		weekNumbers: true,
		eventClick: handleEventClick,
		select: handleDateSelect,
		dayCellContent: (arg) => {
			const solar = Lunar.Solar.fromDate(arg.date)
			const lunar = solar.getLunar()
			return {
				html: `
        <div class="fc-daygrid-day-top">
	  		<div class="fc-daygrid-day-number">
    			<div style="float: right; text-align: right;">${arg.dayNumberText}</div>
		  	</div>
        </div>
        <div style="float: right; text-align: right;">${comAction.isFestival(arg.date)}</div>
        <div style="text-align: right">${lunar.getDayInChinese()}</div>
      `
			}
		}
	})

	function handleDateSelect(selectInfo) {
		const date = new Date(selectInfo.endStr)
		date.setDate(date.getDate() - 1)
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1，并且确保是两位数
		const day = String(date.getDate()).padStart(2, '0') // 确保日期是两位数

		const newdate = year + '-' + month + '-' + day
		let form = {
			eventStartTime: selectInfo.startStr,
			eventEndTime: newdate,
			eventName: selectInfo.title
		}
		formRef.value.onOpen(form)
	}

	function handleEventClick(selectInfo) {
		const date = new Date(selectInfo.endStr)
		date.setDate(date.getDate() - 1)
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1，并且确保是两位数
		const day = String(date.getDate()).padStart(2, '0') // 确保日期是两位数
		const newdate = year + '-' + month + '-' + day
		console.log('id', selectInfo.event)
		console.log('title', selectInfo.event.title)
		console.log('start', selectInfo.date)
		console.log('end', selectInfo.event)
		console.log('allDay', selectInfo.event.allDay)
		let form = {
			id: selectInfo.event.id,
			eventStartTime: selectInfo.startStr,
			eventEndTime: newdate,
			eventName: selectInfo.event.title
		}
		formRef.value.onOpen(form)
	}
	const onOpen = (record) => {
		console.log('record.value', record)
		DateMax.value = record.endDate
		searchEvent(record)
	}
	function searchEvent(record) {
		let params = { calendarName: record.calendarName, id: record.id }
		// bizSchoolCalendarApi.searchEvent(params).then((data) => {
		// 	console.log(data)
		// 	// eventList.value = []
		// })
	}

	defineExpose({
		onOpen
	})
</script>
<style scoped>
	.disabled-button {
		pointer-events: none; /* 禁止点击 */
		opacity: 0.5; /* 可选：改变透明度以指示按钮被禁用 */
		cursor: not-allowed; /* 可选：改变鼠标悬停时的光标样式 */
	}
</style>
